.effect-sadie {
    width: 50%;
}
/*figure.effect-sadie：figure标签在使用.effect-sadie类样式时
figcaption::before ： 在figcaption元素前加上context指定的东西，即''
CSS3 syntax
::before { style properties }
CSS2 syntax
:before { style properties }
 */
figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(62, 66, 87, 0) 0%, rgba(62, 66, 87, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(62, 66, 87, 0) 0%, rgba(62, 66, 87, 0.8) 75%);
    content: '';
    opacity: 0;/*透明度*/
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    color: black;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    color: #AAA;
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em;
    width: 65%;
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
}
/*:hover  eg：a:hover means选择鼠标指针位于其上的链接
figure.effect-sadie:hover means当鼠标停在了使用.effect-sadie类样式的figure标签上时，
元素样式为以下所描述的*/
figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100px, 0);
    transform: translate3d(0, -50%, 0) translate3d(0, -100px, 0);
}

figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
/*这个文件主要是在设计展现视频的那个东西，用在首页：受欢迎视频展示以及分类页面*/